<template>
  <div class="login">
    <video
      src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4"
      autoplay="autoplay"
      loop="loop"
      muted="muted"
      style="width: 100%; height: 100%; object-fit: fill"
    />
    <div class="box">
      <el-card class="el-card">
        <el-form ref="form" :model="form" :rules="rules">
          <div class="title">
            <img
              src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"
              alt=""
              class="image"
            />
          </div>
          <el-form-item prop="account">
            <el-input
              placeholder="账号"
              prefix-icon="el-icon-s-custom"
              v-model="form.account"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              placeholder="密码"
              prefix-icon="el-icon-lock"
              show-password
              v-model="form.password"
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              placeholder="验证码"
              prefix-icon="el-icon-check"
              v-model="form.code"
            >
              <template slot="append"
                ><img
                  @click="updataCode"
                  :src="
                    'https://slwl-geteway.itheima.net/manager/captcha?key=' +
                    form.key +
                    '&0=' +
                    form.key
                  "
                  alt=""
              /></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// import { getCodeApi } from "@/api/login";
export default {
  name: "login-page",
  data() {
    return {
      form: {
        account: "shenlingadmin",
        password: "123456",
        code: "",
        key: String(new Date().getTime()),
      },
      rules: {
        account: [{ required: true, message: "不能为空", trigger: "blur" }],
        password: [{ required: true, message: "不能为空", trigger: "blur" }],
        code: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    async login() {
      await this.$refs.form.validate();
      this.loading = true;
      try {
        await this.$store.dispatch("user/loginAction", this.form);
        this.$router.push("/");
        this.loading = false;
      } catch (e) {
        this.loading = false;
      }
    },
    updataCode() {
      this.form.key = String(new Date().getTime());
      console.log(this.form.key);
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
.login {
  background-size: 100%, 100%;
  min-height: 100vh;
  overflow-y: hidden;
  position: relative;
  video {
    position: fixed;
    right: 0px;
    bottom: 0px;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
  }
  .el-form {
    position: absolute;
    top: 45%;
    left: 45%;
    margin: -180px 0 0 -160px;
    width: 450px;
    height: 467px;
    padding: 36px 40px;
    background: #fff;
    border-radius: 10px;
    .title {
      position: relative;
      margin-bottom: 28px;
      text-align: center;
      img {
        height: 54px;
        border-style: none;
      }
    }
    .el-form-item {
      border-radius: 5px;
      color: #fff;
      transition: all 0.3s;
      margin-bottom: 22px;
    }
    .el-input {
      border-radius: 4px;
      box-sizing: border-box;
      color: #606266;
      font-size: inherit;
      outline: 0;
      transition: border-color 0.2s;
      width: 100%;
      overflow: visible;
      height: 100%;
      .el-input-group__append {
        img {
          height: 34px;
        }
      }
    }
    .el-button {
      width: 100%;
      height: 54px;
      margin-bottom: 14px;
      margin-top: 22px;
      background-color: #e15536;
      font-size: 18px;
      color: #fff;
      border: 0;
      font-weight: 700;
    }
    .el-input__inner {
      padding-left: 48px;
      height: 50px;
    }
    .el-input .el-input__clear {
      line-height: 50px;
      font-size: 20px;
    }
  }
}
</style>
